import {View} from '@tarojs/components';
import s from './index.module.scss';
import Icon from '../../../../../components/Icon';
import {CSSProperties, forwardRef, useEffect, useImperativeHandle, useState} from 'react';
import classNames from 'classnames/bind';
import Taro from '@tarojs/taro';
import {buttonPosition, PositionBasics} from '../index'

// toTop为控制第一段动画的开关
// toEnd按钮缩小之后，清除站位的样式开关，并且是第三段下移动画的开关
// toCartX第三段动画位移X
// toCartY第三段动画位移Y
// toCart第三段动画位移样式
// hide管理button是否显示
// buttonVisible管理主页面最初是否显示button
export interface ATCProps {
  toTop:boolean;
  toEnd: boolean;
  toCartX: number | null;
  toCartY: number | null;
  toCart: CSSProperties;
  hide: boolean;
  buttonVisible: boolean;
}

// cartScale：购物车图标波动效果
// visible: 购物车图标下标数字
interface CartProps {
  cartScale: boolean;
  visible: boolean;
}

interface CartButtonProps {
  setShow:(i:boolean) => void;
  buttonPosition:buttonPosition;
  positioningBasics:PositionBasics;
  onClick: () => void;
}

const CartButton = forwardRef(function CartButton (props:CartButtonProps, ref) {
    const {setShow, buttonPosition, positioningBasics, onClick} = props
    const [cartState, setCartState] = useState<CartProps>({cartScale: false, visible: false})
    const [buttonState, setButtonState] = useState<ATCProps>({toTop:false, toEnd:false, toCart:{}, toCartX:null, toCartY: null, hide: true, buttonVisible: false})

    useEffect(() => {
      if(Object.keys(buttonState.toCart).length === 3){
        setButtonState((prevState) => ({...prevState, hide: false}))
      }
    }, [buttonState.toCart]);
    console.log(buttonState)
    useEffect(() => {
      if(buttonState.toEnd){
        setButtonState((prevState) => ({...prevState, toCart:{...prevState.toCart, transform:`translate(${buttonState.toCartX}px, ${buttonState.toCartY}px)`}}))
      }
    }, [buttonState.toEnd]);


    useEffect(() => {
      if(Object.keys(buttonPosition).length === 2){
          Taro.createSelectorQuery().select(`.${s.icon_container}.${s.cart}`).boundingClientRect((icon: any) => {
            setButtonState((prevState) => ({...prevState, toCart: {position:'absolute', top:`${buttonPosition.y - positioningBasics.y}px`, left:`${buttonPosition.x -positioningBasics.x}px`}}))
            setButtonState((prevState) => ({...prevState, toCartX:icon.left - buttonPosition.x, toCartY: icon.top - buttonPosition.y}))
          }).exec();
      }
    }, [buttonPosition])

    useImperativeHandle(ref, () => {
      return {
        setButtonState

      }
    }, [])

    const animation = () => {
      // toTop结束后打开第二段开关
      if(buttonState.toTop) {
        setButtonState((prevState) => ({...prevState, toEnd: true}))
      }
      if(Object.keys(buttonState.toCart).length === 4){
        setCartState((prevState) => ({...prevState, cartScale:true}))
        setButtonState((prevState) => ({...prevState, hide: true}))
      }
    }
    const handleATC = () => {
      setButtonState((prevState) => ({...prevState, toTop: true}))
      setShow(false)
    }

    const cx = classNames.bind(s)
    const __add_to_cart = cx('to_cart_container', {
      'to_top': buttonState.toTop
    },{
      'hide': buttonState.hide
    },)
    const __number = cx('number', {
      'to_top': buttonState.toTop
    })

    const __icon = cx('icon', {
      'to_top': buttonState.toTop
    },{
      'end' : buttonState.toEnd
    })

    const __title = cx('title', {
      'to_top': buttonState.toTop
    },{
      'end' : buttonState.toEnd
    })

    const cartAnimationEnd = () => {
      setCartState((prevState) => ({...prevState, visible: true}))
      setButtonState({toTop:false, toEnd:false, toCart:{}, toCartX:null, toCartY: null, hide: true, buttonVisible: false})
    }

    const __icon_cart = cx('icon_container', 'cart', {
      'cartScale':cartState.cartScale
    })

    const __cart_number = cx('cart_number', {
      'visible': cartState.visible
    })
    return (
      <View className='main_container'>
        <View className={__add_to_cart} style={buttonState.toCart} onClick={handleATC} onTransitionEnd={animation}>
          <Icon className={__icon} name='rect_210' size={24} color='#FFF'/>
          <View className={__title}>ADD TO CART</View>
          <View className={__number}>1</View>
        </View>
        <View className={s.cart_container}>
          <View className={__icon_cart} onAnimationEnd={cartAnimationEnd} onClick={onClick}>
            <Icon name='rect_210' size={26}/>
          </View>
          <View className={__cart_number} onTransitionEnd={() => setCartState({visible: false, cartScale: false})}>1</View>
        </View>
      </View>
    )
  }
)



export default CartButton